<template>
	<div class="contact-page">
		<div class="contact-cont page-cont-box">
			<BreadCrumb :data="dataObj.crumbList" />
			<div class="cont-box">
				<TitleBox>
					<template #titlecont>
						<span v-lang="{lang: controlSto.language, lgid: -13}">Contact Us</span>
					</template>
				</TitleBox>
				<div class="contact-box">
					<div class="mail-box">
						<div class="mail-wrap">
							<div class="mailimg-box">
								<el-image class="mail-img" :src="mailImg" fit="contain" />
							</div>
							<div class="mail-txt-box">
								<span v-lang="{lang: controlSto.language, lgid: -98}">The TCM_Comb was developed and maintained by the China Pharmaceutical University & Nanjing University of Chinese Medicine. If you have questions or comments related to the database or other suggestions about this website please contact</span>
								<span>：</span>
								<span class="mail-acount">{{ dataObj.docterList[0]?.mail }}</span>
							</div>
						</div>
					</div>



					<div class="dr-box">
						<div class="dr-row">
							<div class="dr-item-box" v-for="item in dataObj.docterList" :key="item.id">
								<div class="person-box">
									<el-image class="person-img" :src="item.avatar" fit="contain" />
								</div>
								<div class="intro-box">
									<p class="dr-name">{{ item.name }}</p>
									<p class="dr-mail">{{ item.mail }}</p>
									<p class="dr-rank" >{{ item.technicalTitle }}</p>
									<p class="dr-instit">{{ item.intro }}</p>
								</div>
							</div>
							<!-- <div class="dr-item-box">
								<div class="person-box">
									<el-image class="person-img" :src="mailImg" fit="contain" />
								</div>
								<div class="intro-box">
									<p class="dr-name" v-lang="{lang: controlSto.language, lgid: -57}">Dr.Li</p>
									<p class="dr-mail">youxiang@163.com</p>
									<p class="dr-rank" v-lang="{lang: controlSto.language, lgid: -59}">Professor</p>
									<p class="dr-instit" v-lang="{lang: controlSto.language, lgid: -5}">Nanjing University of Chinese Medicine</p>
								</div>
							</div>
							<div class="dr-item-box">
								<div class="person-box">
									<el-image class="person-img" :src="mailImg" fit="contain" />
								</div>
								<div class="intro-box">
									<p class="dr-name" v-lang="{lang: controlSto.language, lgid: -58}">Dr.Huang</p>
									<p class="dr-mail">youxiang@163.com</p>
									<p class="dr-rank" v-lang="{lang: controlSto.language, lgid: -59}">Professor</p>
									<p class="dr-instit" v-lang="{lang: controlSto.language, lgid: -5}">Nanjing University of Chinese Medicine</p>
								</div>
							</div> -->
						</div>
					</div>


					     
					
				</div>
			</div>
		</div>
    </div>
</template>



<script setup>
    import { ref, reactive, computed, onBeforeMount, watch } from 'vue'
    import BreadCrumb from '@/components/BreadCrumb.vue'
    import TitleBox from '@/components/TitleBox.vue'

	import mailImg from '@/assets/img/mail.png'
    import { controlStore } from '@/stores/control'
		import { getconstractUs} from '@/service/tcm'


	const controlSto = controlStore();
	const dataObj = reactive({
		crumbList: [
			{
				fkey: '-16',
                lable: 'Home',
                name: 'home'
            }, {
				fkey: '-13',
                lable: 'Contact Us',
                name: ''
            }
        ],
				docterList: []
	});

	const toExpand = (i) => {
        
    };
	onBeforeMount(() => {
		toGetContractUs()
	})
const toGetContractUs = () => {
	getconstractUs({
		langCode: controlSto.language == 1 ? 'ENG' : 'CHN',
	}).then(res => {
		if(res.success) {
			if (res.data) {
				dataObj.docterList = res.data;
			}
		}
	})
}
watch(() => controlSto.language, (n, v) => {
	if (n != v) {
		toGetContractUs()
	}
})

</script>

<style lang="scss" scoped>
	.contact-page {
		height: 100%;
		min-height: calc(100vh - 250px);
		text-align: center;
		background-size: 100% 100%;
		.contact-cont {
			display: inline-block;
			// width: 1400px;
    		text-align: left;
		}
		.contact-box {
			padding-top: 28px;
			.mail-box {
				.mail-wrap {
					position: relative;
					display: flex;
    				min-height: 104px;
					padding-left: 180px;
					align-items: center;
					background-color: #FAFAFA;
					.mailimg-box {
						position: absolute;
						width: 99px;
						top: -18px;
						left: 40px;
					}
					.mail-txt-box {
						font-weight: 600;
						font-size: 14px;
						line-height: 28px;
					}
					.mail-acount {
						color: #CB4042;
					}
				}
			}

			.dr-box {
				padding-top: 65px;
				.dr-row {
					display: flex;
					// justify-content: space-between;
					.dr-item-box {
						display: flex;
						width: 32%;
						min-height: 170px;
						// justify-content: space-between;
						padding: 24px;
						border-radius: 8px;
						box-sizing: border-box;
						background-color: #F8F5F1;
						margin-right: 2%;
						.person-box {
							.person-img {
								width: 126px;
								height: 147px;
							}
						}
						.intro-box {
							flex: 1;
							padding-left: 24px;
							word-wrap: break-word;
							word-break: break-all;
							white-space: pre-wrap;
							box-sizing: border-box;
							.dr-name {
								padding-top: 26px;
								padding-bottom: 10px;
								font-weight: 600;
								font-size: 20px;
								color: #333333;
								line-height: 28px;
							}
							.dr-mail {
								padding-bottom: 10px;
								font-weight: 400;
								font-size: 14px;
								line-height: 20px;
								color: #CB4042;
							}
							.dr-rank, .dr-instit {
								font-weight: 400;
								font-size: 14px;
								color: #333333;
							}


						}
					}
				}
			}




				
				// <div class="person-box">
				// 	<el-image class="person-img" :src="mailImg" fit="contain" />
				// </div>
				// <div class="intro-box">
				// 	<p class="dr-name">Dr.Yang</p>
				// 	<p class="dr-mail">youxiang@163.com</p>
				// 	<p class="dr-rank">Professor</p>
				// 	<p class="dr-instit">Nanjing University of Chinese Medicine</p>
				// </div>


		}
	}
	
</style>
